<template>
    <div class="wrapper">
        <div class="box">
            <img src="../assets/111.jpg" alt="" class="logos">
            <inp @SubmitList="SubmitList"></inp>
            <list :list="list" @changechecked="changechecked" @del="del" :show="show"></list>
            <button class="btn" @click="allShow">显示全部</button>
            <button class="btn" @click="finish">显示已完成</button>
            <button class="btn" @click="nofinish">显示未完成</button>
            <button class="btn" @click="delArr">删除全部</button>
        </div>
    </div>
</template>

<script>
import inp from '../components/inp.vue';
import list from '../components/list.vue';
import {mapState,mapMutations} from 'vuex'
    export default {
        components:{inp, list},
        data() {
            return {
               list:this.$store.state.list,
                show:true
            }
        },
        mounted() {
            
        },
        methods: {
            ...mapMutations(['add','toUpdate','Del','Finish','noFInish','delarr']),
            SubmitList(val){
                let obj={
                    checked:false,
                    title:val
                }
                this.add(obj)
            },
            changechecked(val,index){
                console.log(val,index);
                this.toUpdate(val)
                
            },
            allShow(){
                this.show=true
                this.list=this.$store.state.list
            },
            finish(){
                this.show=false;
                this.Finish();
                this.list=this.$store.state.finish
            },
            nofinish(){
                this.show=false;
                this.noFInish();
               this.list=this.$store.state.nofinish
            },
            del(index){
                this.Del(index)
                console.log(index);
            },
            delArr(){
                this.delarr()
            }
        },
        computed:{
            
        }
    }
</script>

<style  scoped>
.wrapper{
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(90deg,#ffafbd,#ffc3a0);
    position: relative;
}
.box{
    width: 440px;
    height: 500px;
    background: #f2f2f2;
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.logos{
    margin-left: 50px;
    margin-top: 20px;
}
.btn{
    padding: 5px;
    border: 0px;
    background: #ffc3a0;
    margin: 5px;
}
</style>